<script lang="ts">
import type { TColumn } from '~/components/table';
import type { TPresetBreakpoints } from '~/composables/useElementBreakpoint';

function useTableList(bp: Ref<TPresetBreakpoints>) {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiUserSessionsList, {
    page_size: { value: 15, responsive: true },
  });
  const listData = computed(() => listQry.data.value?.list ?? []);

  const tableBp = computed(() => ({
    s1: bp.value.ltxl, // 手机
    s2: bp.value.xl && bp.value.lt2xl, // 平板
    s3: bp.value['2xl'], // PC
  }));

  const tableColumns = computed(() => {
    const bp = tableBp.value;
    const columns: TColumn[] = [
      { key: 'time', name: $t('vSWndcqBgbF9tlnzy6ZR'), show: bp.s2 || bp.s3 },
      { key: 'type', name: $t('jOak18BGyOWyna9T_1Ov') },
      { key: 'expired', name: '', show: bp.s2 || bp.s3 },
      { key: 'action', name: '', thClass: 'text-right', tdClass: 'text-right' },
    ];
    return columns;
  });

  return {
    listQry,
    listData,
    listParams,
    tableColumns,
    tableBp,
  };
}
</script>

<script lang="ts" setup>
const [setEle, eleBp] = useElementBreakpoint({});
const { listQry, listData, listParams, tableColumns, tableBp } = useTableList(eleBp);

function openDialog(id: string) {
  antdModal.confirm({
    title: $t('rE2vhs2Br2thRydumBlG'),
    class: 'ant-cover__confirm-modal',
    centered: true,
    async onOk() {
      const requestBody = { session_ids: [id], security_code: '', password: '' };
      const fa2Res = await openAuthFlowPopup('verify2FA', { requirePassword: true });
      requestBody.security_code = fa2Res?.security_code ?? '';
      requestBody.password = fa2Res?.password ?? '';

      apis.apiUserSessionsKick({ requestBody }, { successMessage: true }).then(() => {
        queryClient.invalidateQueries({
          queryKey: [apis.apiUserSessionsKick.id],
          exact: false,
        });
      });
    },
  });
}
</script>

<template>
  <div>
    <TCard :ref="setEle" :title="$t('mdjEiYZbSNcL4b0Htx6b')" class="!bg-sys-layer-a">
      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" errorClass="min-h-40" outRender>
        <TTable indexId="code" :columns="tableColumns" :data="listData">
          <template #type-td="{ row }">
            {{ `${row.os}&nbsp;${row.os_version} / ${row.browser_name}&nbsp;${row.browser_version}` }}
            <div v-if="tableBp.s1" class="mt-1 text-3 text-sys-text-body">
              {{ $t('acufy070I95AhOId0Uq3N') }}: {{ $d(row.last_time, 'full') }}
            </div>
          </template>
          <template #time-td="{ row }">
            {{ $t('acufy070I95AhOId0Uq3N') }}: {{ $d(row.last_time, 'full') }}
          </template>
          <template #expired-td="{ row }">
            <span v-if="row.expire_time <= new Date().getTime()" class="text-red500">{{ $t('zDEuxolhLChJeTWohBEiM') }}</span>
            <span v-else class="text-green500">{{ $t('zIdkPx8HNr9WRwSkJCkWf') }}</span>
          </template>
          <template #action-td="{ row }">
            <div v-if="tableBp.s1">
              <span v-if="row.expire_time <= new Date().getTime()" class="text-red500">{{ $t('zDEuxolhLChJeTWohBEiM') }}</span>
              <span v-else class="text-green500">{{ $t('zIdkPx8HNr9WRwSkJCkWf') }}</span>
            </div>
            <div u-lt:tablet="text-3">
              <span
                v-if="row.is_me === 0"
                class="cursor-pointer text-yellow500 decoration-underline"
                @click="openDialog(row.session_id)"
              >{{ $t('lfzWQrhvPkeFWwebsYi8') }}</span>
              <span v-else class="text-sys-text-body">{{ $t('qlnPcSqgz6Xz3wA6WiEu') }}</span>
            </div>
          </template>
        </TTable>

        <template #pending>
          <div v-if="eleBp.lt2xl">
            <TSkeleton v-for="i in 3" :key="i" class="grid grid-cols-2 mb-6 w-full gap-2">
              <TSkeleton type="rect" width="120px" height="15px" />
              <TSkeleton type="rect" width="70px" height="15px" class="ml-auto" />
              <TSkeleton type="rect" width="100px" height="15px" />
              <TSkeleton type="rect" width="80px" height="15px" class="ml-auto" />
            </TSkeleton>
          </div>
          <TTableLoading v-if="eleBp['2xl']" />
        </template>
      </TSuspenseView>
    </TCard>

    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-2"
    />
  </div>
</template>
